<template>
  <div style="background-color: #eee">
    <div class="header mt-1 bg-white p-3">
      <span class="p-1 text-slate-300">首页</span>/<span class="pl-2"
        >会议管理</span
      >
      <h3 class="font-bold text-xl">会议管理</h3>
    </div>
    <div>
      <n-button
        type="info"
        size="medium"
        class="ml-auto mt-2"
        @click="AddNewUser"
        >+ 添加会议申请</n-button
      >
    </div>
    <div>
      <n-data-table
        :columns="columns"
        :data="data"
        :pagination="pagination"
        :bordered="false"
      />
    </div>
    <div class="flex justify-end">
      <n-pagination
        v-model:page="page"
        :page-count="totalpage"
        @update:page="changepage"
      />
    </div>
    <AddUser
      v-if="showModal"
      :showModal="showModal"
      @CheckShowModal="CheckShowModal"
    ></AddUser>
  </div>
</template>

<script lang="ts" setup>
import { h, ref, reactive } from "vue";
import { NButton, NTime, useMessage } from "naive-ui";
import type { DataTableColumns } from "naive-ui";
import AddUser from "./comp/AddUser.vue";
import { getMeeting } from "@/api/meeting";
import { GetUserInfo } from "@/api/user";
import { GetOfficeInfo } from "@/api/office";
type Song = {
  uId: number;
  uName: string;
  uTel: string;
  startTime: number;
};
const page = ref(1);
const totalpage = ref(0);
const showModal = ref(false);
const message = useMessage();
const createColumns = ({
  play,
}: {
  play: (row: Song) => void;
}): DataTableColumns<Song> => {
  return [
    {
      title: "序号",
      key: "coId",
    },
    {
      title: "会议室",
      key: "oId",
    },
    {
      title: "开始时间",
      key: "startTime",
      render(row: any) {
        return h(NTime, {
          time: Number(row.startTime*1000),
        });
      },
    },
    {
      title: "结束时间",
      key: "endTime",
      render(row: any) {
        return h(NTime, {
          time: Number(row.endTime*1000),
        });
      },
    },
    {
      title: "申请人",
      key: "uName",
    },
    {
      title: "申请人部门",
      key: "dName",
    },
  ];
};
const data: any = ref([]);
const columns = createColumns({
  play(row: Song) {
    message.info(`Play ${row.uName}`);
  },
});
const params = reactive({
  page: 1,
});
const dId = reactive({
  dId: 0,
});
const uId = reactive({
  uId: 1,
});
const init = () => {
  getMeeting().then((res: any) => {
    console.log(res)
    data.value = res.data;
    res.data.forEach((item: any, key: any) => {
      uId.uId = item.uId;
      GetUserInfo(uId).then((resa) => {
        let objNamea = { uName: resa.data.uName };
        data.value[key] = { ...objNamea, ...data.value[key] };
      });
      dId.dId = item.dId;
      GetOfficeInfo(dId).then((resb) => {
        let objNameb = { dName: resb.data.dName };
        data.value[key] = { ...objNameb, ...data.value[key] };
      });
    });
    totalpage.value = res.data.totalPage;
  });
};
init();
const pagination = false;
const AddNewUser = () => {
  showModal.value = true;
};
const CheckShowModal = (val: any) => {
  showModal.value = val;
  init();
};
const changepage = (val: number) => {
  params.page = val;
  getMeeting().then((res: any) => {
    
    data.value = res.data.data;
  });
};
</script>

<style scoped lang="scss">
div {
  margin-top: 1vh;
}
::v-deep(.n-data-table .n-data-table-th) {
  text-align: center;
}
::v-deep(.n-data-table .n-data-table-td) {
  text-align: center;
}
</style>
